<template>
	<div class="activeDetails">
		<!-- 头部图片 -->
		<div class="head_box">
			<div class="img_bj">
				<u--image :showLoading="true" :src="bj" width="100%" height="160px"></u--image>
			</div>
		</div>
		<!-- 活动内容 -->
		<div class="content">
			<!-- 模块1 -->
			<div class="model1">
				<u--text size="18" :text="Data.title"></u--text>
				<div class="p2">
					<u--text size="13" color="#7c7c7c" text="计划报名不限人,每位限报1人"></u--text>
					<div class="p2_txt">已报：<span>{{Data.applyNumber}}人</span></div>
				</div>
			</div>
			<!-- 模块2 -->
			<div class="model2">
				<u-cell :icon="shuxian" title="活动详情"></u-cell>
				<div class="model2_p1">
					<div class="logo_box">
						<u--image :showLoading="true" :src="logo" width="41px" height="39px"></u--image>
						<div class="title_box">
							<div class="title" style="font-weight: bold; margin-bottom: 5px">
								都安瑶族自治县高级中学
							</div>
							<div class="time" style="font-size: 12px; color: #767676">
								2022-09-01 10:33
							</div>
						</div>
					</div>
					<div class="text_box">
						<div class="text1">组织建设</div>
						<div class="text2" style="color: #767676">
							活动费用：<span style="color: #6ad7d4">免费</span>
						</div>
					</div>
				</div>
				<u-cell title="活动时间" value="2022-06-21 00:00 - 2022-10-15 00:00"></u-cell>
				<u-cell title="报名时间" value="2022-06-21 00:00 - 2022-10-15 00:00"></u-cell>
				<u-cell title="活动地点">
					<template slot="value">
						<u-icon name="map-fill" size="16" color="#1990ff" :label="Data.place"></u-icon>
					</template>
				</u-cell>
				<u-cell title="联系人" value="0755-88010988" label="张老师"></u-cell>
			</div>
			<!-- 模块3 -->
			<div class="model3" style="background: white; margin-bottom: 6px" @click="goDetails">
				<u-cell :icon="shuxian" title="已报名人" isLink></u-cell>
			</div>
		</div>
		<!-- 报名按钮 -->
		<div class="btn_box" style="
        padding: 20px 10px;
        box-sizing: border-box;
        background: white;
        width: 100%;
      ">
			<button class="btn" style="background: #1990ff; color: white; border-radius: 10px">
				我要报名
			</button>
		</div>
	</div>
</template>
<script>
	import http from '@/apis/http.js'
	export default {
		data() {
			return {
				id:null,
				Data:{},
				bj: require("@/static/index/head_bj.png"),
				shuxian: require("@/static/index/shuxian.png"),
				logo: require("@/static/index/logo.png"),
			};
		},
		onLoad(e) {
			console.log("---", e.id)
			this.id=e.id
			// console.log("---",typeof(+e.id))
			let ids = +e.id
			console.log(ids)
			console.log(http)
			let urlactivityDetails = this.$apis.url.activityDetails;
			http.get(urlactivityDetails + '/' + ids).then(
				res => {
					if (res) {
						console.log("---",res)
						if(res.success){
							this.Data=res.result
							console.log(this.Data)
							
						}
						// Object.assign(this.activity, res.result)
						// this.imglist = JSON.parse(JSON.stringify(this.activity.imglist))
						// console.log(this.activity)
						// if (this.signin == 1) {
						// 	if (this.activity.state == 0) {
						// 		getApp().globalData.showToast("此活动尚未报名，正尝试为您报名")
						// 		this.signupAndSignin()
						// 	} else if (this.activity.state == 5) {
						// 		getApp().globalData.showToast("此活动已关闭")
						// 	} else {
						// 		this.signin()
						// 	}
						// }
					} else {
						// getApp().globalData.showToast(res.message || "加载失败")
					}
				}
			)



			// this.$apis.activityDetails().then((res) => {
			// 	console.log(res)
			// 	if (res.success) {
			// 		// let shuju = res.result
			// 		// this.activeList = res.result
			// 	}

			// })

		},
		methods: {
			goDetails() {
				uni.navigateTo({
					url: `/pages/alumniActivities/SignUpPeople?actId=${this.id}`,
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.content {
		.model1 {
			background: white;
			padding: 20px 15px;
			margin-bottom: 6px;

			.p2 {
				display: flex;
				justify-content: space-between;
				margin-top: 20px;

				.p2_txt {
					font-size: 13px;
					color: #7c7c7c;

					span {
						color: #5dd5d2;
					}
				}
			}
		}

		// 模块2
		.model2 {
			background: white;

			.model2_p1 {
				display: flex;
				justify-content: space-between;
				padding: 20px 15px;

				.logo_box {
					display: flex;
					justify-content: space-between;

					.title_box {
						margin-left: 5px;
					}
				}

				.text_box {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					font-size: 14px;

					.text1 {
						background: #1990ff;
						color: white;
						padding: 2px 6px;
						text-align: center;
						margin-bottom: 5px;
					}
				}
			}
		}
	}
</style>
